<template>
  <div id="coin">
    <div class="coin-charge">
      <div class="title">
        <img src="../../assets/img/zhuangshi.png" alt />
        <h4>充币</h4>
      </div>
      <div class="cc">
        <div class="cc-l">
          <p>链名称</p>
          <div>
            <span class="aisleActive">OMNI</span>
            <!-- <span>TRC20</span> -->
          </div>
          <p>充币地址</p>
          <input id="copyWord" type="text" :value="chongbi.virtualAddress" />
          <p>{{chongbi.virtualAddress}}</p>
          <div>
            <div>
              <span @click="copy">复制</span>
              <img src="../../assets/img/fuzhi.png" alt />
            </div>
            <div>
              <!-- <span></span> -->
              <el-popover placement="bottom" width="180" trigger="click">
                <div>
                  <vue-qr v-if="codeStatus" :text="chongbi.virtualAddress" :size="150"></vue-qr>
                </div>
                <el-button class="codestyle" plain type="warning" size="small" slot="reference">二维码</el-button>
              </el-popover>
              <img style="width:12px;" src="../../assets/img/erweima.png" alt />
            </div>
          </div>
        </div>
        <div class="cc-r">
          <div class="titles">
            <img src="../../assets/img/tishi.png" alt />
            <h4>温馨提示</h4>
          </div>
          <div>
            <p>1、禁止向USDT地址充值除USDT之外的资产，任何充入USDT地址的非USDT资产将不可找回;</p>
            <p>2、USDT区块确认数达到2个后您的USDT会自动转入您的账户；</p>
            <p>3、充值完成后，您可以查看充币记录跟踪进度。</p>
          </div>
        </div>
      </div>
    </div>
    <div class="coin-mention">
      <div class="title">
        <img src="../../assets/img/zhuangshi.png" alt />
        <h4>提币</h4>
      </div>
      <div class="cm-content">
        <p>链名称</p>
        <div>
          <span class="aisleActive">OMNI</span>
          <!-- <span>TRC20</span> -->
        </div>
        <ul>
          <li>
            <p>提币地址</p>
            <el-input size="small" v-model="tibi.toAddress" placeholder="请输入提币地址"></el-input>
          </li>
          <li>
            <p>提币数量</p>
            <el-input size="small" v-model="tibi.coinNumber" placeholder="请输入提币数量"></el-input>
          </li>
          <!-- <li>
            <p>提币地址</p>
            <el-input size="small" v-model="input" placeholder="请输入内容"></el-input>
          </li>-->
        </ul>
        <div>
          <el-button :loading="load" style="width:200px" size="small" @click.native="getTibi" type="warning">确认</el-button>
          <span>网络手续费：</span>
          <span style="color:#DBB783">{{tbMessage.coinDrawHandlingFee}} USDT</span>
          <span>到账数量：</span>
          <span style="color:#DBB783">{{gain}} USDT</span>
        </div>
        <div>
          <div class="titles">
            <img src="../../assets/img/tishi.png" alt />
            <h4>温馨提示</h4>
          </div>
          <div>
            <p>1、提币数量为：{{tbMessage.coinDrawMin}}~{{tbMessage.coinDrawMax}} USDT (OMNI)。</p>
            <p>2、为保障资金安全，当您账户安全策略变更、密码修改、我们会对提币进行人工审核，请耐心等待工作人员电话或邮件联系。</p>
            <p>3、请务必确认电脑及浏览器安全，防止信息被篡改或泄露。</p>
          </div>
        </div>
      </div>
    </div>
    <div class="tablelist">
      <el-tabs v-model="activeName">
        <el-tab-pane label="充币记录" name="first">
          <el-table height="300" :data="cList" stripe style="width: 100%">
            <!-- <el-table-column prop="statusDesc" label="状态" min-width="180"></el-table-column> -->
            <el-table-column prop="ammount" label="充币数量" min-width="80"></el-table-column>
            <el-table-column prop="address" label="链名称" min-width="60">
              <template>
                OMIN
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="时间" min-width="120"></el-table-column>
            <el-table-column prop="toAddress" label="地址" min-width="200"></el-table-column>
            <el-table-column prop="txHash" label="Txid" min-width="240"></el-table-column>
          </el-table>
          <el-pagination
            @current-change="nextPage1"
            style="text-align:center;margin-top:20px;"
            small
            layout="prev, pager, next"
            :total="total1"
            :page-size="7"
          ></el-pagination>
        </el-tab-pane>

        <el-tab-pane label="提币记录" name="second">
          <el-table height="300" :data="tList" stripe style="width: 100%">
            <el-table-column prop="statusDesc" label="状态" min-width="80"></el-table-column>
            <el-table-column prop="ammount" label="提币数量" min-width="60"></el-table-column>
            <el-table-column prop="" label="链名称" min-width="50">
              <template>
                OMIN
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="时间" min-width="120"></el-table-column>
            <el-table-column prop="fromAddress" label="地址" min-width="200"></el-table-column>
            <el-table-column prop="txHash" label="Txid" min-width="240"></el-table-column>
          </el-table>
          <el-pagination
            @current-change="nextPage2"
            style="text-align:center;margin-top:20px;"
            small
            layout="prev, pager, next"
            :total="total2"
            :page-size="7"
          ></el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import {
  getCoinRechargeAddress,
  getCoinDrawInfo,
  askForCoinDraw,
  getCoinRechargeList,
  getCoinDrawList
} from "../../api/api";
import { mapState } from "vuex";
import vueQr from "vue-qr";
import qs from "qs";
export default {
  name: "coin",
  data() {
    return {
      //充币
      chongbi: [],
      codeStatus: false,
      cList:[],
      total1:10,
      page1:1,
      //提币
      tbMessage: [],
      tibi: {
        toAddress: "",
        coinNumber: ""
      },
      tList:[],
      total2:10,
      page2:1,
      load:false,
      gain: "0.00",
      activeName:'first'
    };
  },
  computed: {
    ...mapState(["token"])
  },
  created() {
    this.getChongbi();
    this.getMessage();
    this.getCList();
    this.getTList()
  },
  components: {
    vueQr
  },
  watch: {
    "tibi.coinNumber"() {
      var num = this.tibi.coinNumber - this.tbMessage.coinDrawHandlingFee;
      if (num < 0) {
        this.gain = "0.00";
        this.$notify({
          title: "警告",
          message: "提币数量不能少于手续费！",
          type: "warning"
        });
      } else {
        this.gain = num;
      }
    }
  },
  methods: {
    //充币
    getChongbi() {
      var params = {
        token: this.token
      };
      getCoinRechargeAddress(qs.stringify(params)).then(res => {
        this.chongbi = res.data.data;
        this.codeStatus = true;
        // console.log(this.chongbi);
      });
    },
    getCList(){
      var params = {
        page:this.page1,
        rows:7,
        token:this.token
      }
      getCoinRechargeList(qs.stringify(params)).then(res=>{
        this.cList = res.data.data
        this.total1 = res.data.count
      })
    },
    nextPage1(val){
      this.page1 = val
      this.getCList()
    },
    //复制
    copy() {
      var num = document.getElementById("copyWord");
      num.select();
      document.execCommand("Copy");
      this.$notify({
        title: "提示",
        message: "复制成功！",
        type: "success"
      });
    },
    //获取提币信息
    getMessage() {
      var params = {
        token: this.token
      };
      getCoinDrawInfo(qs.stringify(params)).then(res => {
        this.tbMessage = res.data.data;
      });
    },
    //提币
    getTibi() {
      if(this.tibi.coinNumber=="" || this.tibi.toAddress==""){
        this.$notify({
            title: "警告",
            message: "提币地址和提币数量不能为空！",
            type: "warning"
          });
          return false
      }
      this.load = true
      var params = {
        token: this.token,
        coinNumber: this.tibi.coinNumber,
        toAddress: this.tibi.toAddress
      };
      
      askForCoinDraw(qs.stringify(params)).then(res => {
        this.load = false
        if (res.data.code == 200) {
          this.$notify({
            title: "提示",
            message: "提币成功！",
            type: "success"
          });
        } else {
          this.$notify({
            title: "警告",
            message: res.data.msg,
            type: "warning"
          });
        }
      });
    },
    getTList(){
      var params = {
        token:this.token,
        page:this.page2,
        rows:7,
      }
      getCoinDrawList(qs.stringify(params)).then(res=>{
        this.tList = res.data.data
        this.total2 = res.data.count 
      })
    },
    nextPage2(val){
      this.page2 = val
      this.getTList()
    },
  }
};
</script>
<style lang='less' scope>
.btns {
  display: inline-block;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background-image: linear-gradient(to right, #cfa66e, #fbe0b8);
  padding: 6px 0;
  border-radius: 4px;
  width: 200px;
  margin-right: 20px;
  cursor: pointer;
}
.codestyle {
  border: 0;
  background-color: #fff !important;
  color: #0a9187 !important;
  padding: 0px !important;
}
.title {
  position: relative;
  > img {
    position: absolute;
    top: 4px;
  }
  > h4 {
    margin-left: 50px;
  }
}
.aisleActive {
  border: 1px solid#DBB783 !important;
  color: #dbb783 !important;
}
// -------------------------
.coin-charge {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
  .cc {
    margin: 20px 0 0 50px;
    display: flex;
    justify-content: flex-start;
    > div {
      width: 50%;
    }
    > .cc-l {
      > input:nth-of-type(1) {
        width: 300px;
        border: 0;
        margin-bottom: 10px;
        position: fixed;
        left: -1000px;
        opacity: 0;
      }
      > p:nth-of-type(1) {
        font-size: 13px;
        color: #a1b1b0;
        margin-bottom: 20px;
      }
      > div:nth-of-type(1) {
        margin-bottom: 30px;
        > span {
          font-size: 14px;
          color: #a1b1b0;
          border: 1px solid #a1b1b0;
          padding: 6px 15px;
          margin-right: 30px;
        }
      }
      > p:nth-of-type(2) {
        font-size: 13px;
        color: #a1b1b0;
        margin-bottom: 5px;
      }
      > p:nth-of-type(3) {
        color: #334d50;
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      > div:nth-of-type(2) {
        display: flex;
        font-size: 14px;
        color: #0a9187;
        > div {
          margin-right: 30px;
          cursor: pointer;
        }
      }
    }
    > .cc-r {
      background-color: #fffaf7;
      padding: 20px 20px 0;
      color: #a1b1b0;
      font-size: 12px;
      > .titles {
        display: flex;
        > h4 {
          margin-left: 10px;
          color: #ff6057;
        }
      }
      p {
        line-height: 25px;
      }
    }
  }
}
.coin-mention {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
  .cm-content {
    margin-left: 50px;
    margin-top: 20px;
    > p:nth-of-type(1) {
      font-size: 13px;
      color: #a1b1b0;
      margin-bottom: 20px;
    }
    > div:nth-of-type(1) {
      margin-bottom: 30px;
      > span {
        font-size: 14px;
        color: #a1b1b0;
        border: 1px solid #a1b1b0;
        padding: 6px 15px;
        margin-right: 30px;
      }
    }
    > ul:nth-of-type(1) {
      display: flex;
      > li {
        margin-right: 20px;
        p {
          font-size: 14px;
          color: #a1b1b0;
          margin-bottom: 10px;
        }
      }
    }
    > div:nth-of-type(2) {
      margin: 20px 0;
      font-size: 14px;
      color: #334d50;
      > span:nth-of-type(4) {
        margin-left: 20px;
      }
    }
    > div:nth-of-type(3) {
      background-color: #fffaf7;
      padding: 20px 20px 10px;
      color: #a1b1b0;
      font-size: 12px;
      > .titles {
        display: flex;
        > h4 {
          margin-left: 15px;
          color: #ff6057;
        }
      }
      p {
        line-height: 30px;
      }
    }
  }
}
// ----------------------
.el-tabs {
  background-color: #fff;
}
.el-tabs__item.is-active {
  color: #0a9187;
}
.el-tabs__item:hover {
  color: #0a9187;
}
.el-tabs__active-bar {
  background-color: #0a9187;
}
.el-table {
  font-size: 12px;
}
.el-table td,
.el-table th {
  padding: 6px 0;
}
</style>